<div class="container">
  <div class="signup-form">
    <div class="form-container">
      <div class="form-title">
        SIGN UP
      </div>
      <div class="form-horizontal">
        <form [formGroup]='signUpFG'>
          <mat-form-field>
            <input matInput placeholder='Username' formControlName='userId' required>
            <!-- <mat-error *ngIf='"required"'>必填</mat-error> -->
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Email" formControlName='email' required>
            <!-- <mat-error *ngIf='"required"'>必填</mat-error> -->
            <mat-error *ngIf='"email"'>The mailbox format is incorrect.</mat-error>
          </mat-form-field>
          <ng-container formGroupName='password'>
            <mat-form-field>
              <input [type]='hide? "password": "text"' matInput placeholder="Password" formControlName='value' required>
              <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
              <!-- <mat-error *ngIf='"required"'>必填</mat-error> -->
            </mat-form-field>
            <mat-form-field>
              <input [type]='hideRepeat? "password": "text"'  matInput placeholder="Password repeat" formControlName='repeat'required>
              <mat-icon matSuffix (click)="hideRepeat = !hideRepeat">{{hideRepeat ? 'visibility_off' : 'visibility'}}</mat-icon>
              <!-- <mat-error *ngIf='"required"'>必填</mat-error> -->
              <!-- <mat-error *ngIf='"passwordEqual"'>Passwords do not match</mat-error> -->
            </mat-form-field>
            
          </ng-container>
          <div class='error-panel' [style.display]='errorInfo.show? "block": "none"'>
            {{errorInfo.message}}
          </div>
          <button mat-flat-button color="primary" [disabled]='!signUpFG.valid' (click)='onSubmit()'>Create an account</button>
        </form>
      </div>

    </div>

  </div>
</div>
